<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Admin Dashboard</title>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入 Element UI 的 JS 和 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
    <style>
        div[style^="flex"] a {
            display: block;
            text-decoration: none;
            margin-left: 0;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
        }

        /* 主内容区域样式 */
        .main-content {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center; /* 让内容区域中的文字居中 */
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }

        /* 用户信息区域 */
        .user-info {
            position: absolute;
            top: 10px;
            right: 20px;
            color: #666;
        }

        canvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            opacity: 0.5;
            pointer-events: none;
        }
    </style>
</head>
<body>
<!-- Vue 实例 -->
<div id="app">
    <el-container>
        <!-- 左侧菜单栏 -->
        <el-aside width="250px" style="background-color: #ffffff; color: #fff;height: 350px;">
            <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleMenuSelect">
                <el-menu-item index="1">Dashboard</el-menu-item>
                <el-menu-item index="2">支付设计白皮书</el-menu-item>
                <el-menu-item index="3">科目账户结构展示</el-menu-item>
                <el-menu-item index="4">账务报表</el-menu-item>
                <el-menu-item index="5">会计报表</el-menu-item>
                <el-menu-item index="6">交易列表</el-menu-item>
                <!-- 添加其他菜单项 -->
            </el-menu>
        </el-aside>
        <!-- 主内容区域 -->
        <el-main class="main-content">
            <div class="user-info">
                <!-- 这里显示当前登录用户 -->
                Welcome, echo! <!-- 假设用户名为 User123 -->
            </div>
            <div v-if="dashboardShow">
                <h1>{{ displayContent }}</h1>
            </div>
            <div v-if="payShow"style="display: flex;">
                <div style="flex: 1;">
                    <h1>{{ displayContent }}</h1>
                </div>
                <div style="flex: none; margin-left: 100px; display: flex; flex-direction: column; align-items: flex-start;">
                    <a href="link/1" style="margin-top: 10px;">1、支付系统的架构设计</a>
                    <a href="link/2" style="margin-top: 10px;">2、差错处理</a>
                    <a href="link/3" style="margin-top: 10px;">3、日切</a>
                    <a href="link/4" style="margin-top: 10px;">4、第三方支付</a>
                    <a href="link/5" style="margin-top: 10px;">5、复式记账法</a>
                    <a href="link/6" style="margin-top: 10px;">6、账户设计中的各种账户</a>
                    <a href="link/7" style="margin-top: 10px;">7、渠道</a>
                    <a href="link/8" style="margin-top: 10px;">8、蓝票和红票</a>
                    <a href="link/9" style="margin-top: 10px;">9、借记卡和贷记卡</a>
                    <a href="link/10" style="margin-top: 10px;">10、会计报表</a>
                    <a href="link/11" style="margin-top: 10px;">11、财务报表</a>
                </div>
            </div>
            <div v-if="subjectShow">
                <h1>{{ displayContent }}</h1>
            </div>
            <div v-if="accountingShow">
                <h1>{{ displayContent }}</h1>
            </div>
            <div v-if="accountancyShow">
                <h1>{{ displayContent }}</h1>
            </div>
            <div v-if="transactionShow">
                <h1>{{ displayContent }}</h1>
            </div>
        </el-main>
    </el-container>
</div>

<canvas id="mycanvas"></canvas>
<script>
    //window.requestAnimationFrame()这个API是浏览器提供的js全局方法，针对动画效果。
    window.requestAnimationFrame=(function(){
        return window.requestAnimationFrame||
            window.webkitRequestAnimationFrame||
            window.mozRequestAnimationFrame||
            function (callback){
                window.setTimeout(callback,1000)
                //每间隔10秒执行一次动画
            }
    })();
    //获取canvas区域.并设置宽和高
    var area=document.getElementById("mycanvas");
    area.width=document.documentElement.clientWidth;
    area.height=document.documentElement.clientHeight;
    //转换成2d模型
    var ctx=area.getContext("2d");
    //烟花数组
    hue=120;//设置颜色范围
    timerTick = 0;//计时器
    timerTotal=5;//每间隔5秒烟花绽放一次
    fireworks=[];//存放烟花数组
    particles=[];//存放碎屑数组
    //随机min和max之间的值
    function random(min,max){
        return Math.random()*(max-min)+min;
    }
    //计算两点之间的距离
    function distans(sx,sy,tx,ty){
        var xdistan=sx-tx;
        var ydistan=sy-ty;
        return Math.sqrt((Math.pow(xdistan,2)+Math.pow(ydistan,2)));
    }
    //定义烟花对象
    function Firework(sx,sy,tx,ty){
        this.x=sx;
        this.y=sy;
        this.sx=sx;
        this.sy=sy;
        this.tx=tx;
        this.ty=ty;
        //计算两点之间的距离
        this.targetDistances=distans(sx,sy,tx,ty);
        //运行距离
        this.distancesc=0;
        //定义变量生成的运动轨迹
        this.guiji=[];
        this.guijicount=3;
        while(this.guijicount--){
            this.guiji.push([this.x,this.y]);
        }
        //计算角度
        this.angle=Math.atan2(ty-sy,tx-sx);
        this.speed=2;
        this.jiasudu=1.05;
        this.brightness=random(50,70);//烟花的明度
        this.targetRad=5;//烟花小圈的半径
    }
    //更新烟花的位置
    Firework.prototype.update=function(index){
        this.guiji.pop();
        this.guiji.push([this.x,this.y]);
        //目标圆运动
        if(this.targetRad<8){
            this.targetRad+=0.3;
        }else{
            this.targetRad=1;
        }
        //根据加速度计算速度并且计算出烟花运行过程中x轴和y轴的速度
        this.speed*=this.jiasudu;
        var vx=Math.cos(this.angle)*this.speed;
        var vy=Math.sin(this.angle)*this.speed;
        //重新计算两点之间的距离
        this.distancesc=distans(this.sx,this.sy,this.x+vx,this.y+vy);
        //如果烟花运行距离大于或等于初始位置到目标位置之间的距离，生成新烟花并移除当前烟花，否则更新烟花位置
        if(this.distancesc>=this.targetDistances){
            //生成烟花碎屑
            createparticals(this.tx,this.ty);
            //销毁烟花小圈
            fireworks.splice(index,1)
        }else{
            this.x+=vx;
            this.y+=vy;
        }
    }

    //开始画运行轨迹
    Firework.prototype.draw=function(){
        ctx.beginPath();
        //轨迹的起点
        ctx.moveTo(this.guiji[this.guiji.length-1][0],this.guiji[this.guiji.length-1][1]);
        //绘制线条到目标点
        ctx.lineTo(this.x,this.y);
        //画出不同颜色的烟花
        ctx.strokeStyle='hsl('+hue+',100%,'+this.brightness+'%)';
        ctx.stroke();//绘制烟花轨迹
        //画出目标小圆
        ctx.beginPath();
        ctx.arc(this.tx,this.ty,this.targetRad,0,Math.PI*2);
        ctx.stroke();
    }
    //定义烟花碎屑方法
    function Particle(x, y) {
        this.x = x;
        this.y = y;
        this.guiji = [];
        this.guijicount = 10;
        while(this.guijicount--){
            this.guiji.push([this.x,this.y]);
        }
        //生成任意方向的碎屑
        this.angle=random(0 , 2*Math.PI);
        this.speed=random(1,10);//随机的速度
        this.mocal=0.95;//摩擦力
        this.gravity=0.98;//重力
        this.hue=random(hue-20,hue+20);//碎屑颜色变化范围
        this.brightness=random(50,80);
        this.alpha=1;//定义碎屑初始不透明
        this.decay=random(0.015,0.03);//碎屑消失的时间
    }
    //更新碎屑
    Particle.prototype.update=function(index){
        this.guiji.pop();
        //unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
        this.guiji.unshift([this.x,this.y]);
        //下面是烟花碎屑的运动
        this.speed*=this.mocal;
        this.x+=Math.cos(this.angle)*this.speed;
        this.y+=Math.sin(this.angle)*this.speed+this.gravity;
        this.alpha-=this.decay;//不透明度一直随时间变为0；即烟花碎屑消失
        if(this.alpha<=this.decay){
            particles.splice(index,1)//销毁烟花碎屑
        }
    }
    //画烟花碎屑轨迹
    Particle.prototype.draw=function(){
        ctx.beginPath();
        ctx.moveTo(this.guiji[this.guiji.length-1][0],this.guiji[this.guiji.length-1][1]);
        ctx.lineTo(this.x,this.y);
        //画出不同颜色的烟花利用HSL
        ctx.strokeStyle='hsl('+hue+',100%,'+this.brightness+'%)';
        ctx.stroke();
    }
    //创建碎屑
    function createparticals(x,y){
        //设定碎屑数目
        var particalcount=500;
        while(particalcount--){
            //随着碎屑数目的减少为0，又重新调用碎屑方法
            particles.push(new Particle(x,y))
        }
    }
    //获取屏幕的宽和高
    var clientw=document.documentElement.clientWidth;
    var clienth=document.documentElement.clientHeight;
    function loop(){
        //requestAnimationFrame() 方法来告诉浏览器需要执行的动画，
        // 并让浏览器在下一次重绘之前调用指定的函数来更新动画。
        requestAnimationFrame(loop);
        hue+=0.5;
        //在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillRect(0,0,clientw,clienth);
        ctx.fillStyle='rgb(0,0,0,0.5)';
        //显示源图像和目标图像。
        ctx.globalCompositeOperation='lighter';
        var i=fireworks.length;
        while(i--){
            fireworks[i].draw();
            fireworks[i].update(i);
        }
        var i=particles.length;
        while(i--){
            particles[i].draw();
            particles[i].update(i);
        }
        //此时，我们还没有创建任何的烟花。我们希望设置一个定时时间timerTotal，周期性的
        // 产生一个烟花，我们也需要一个时间计数timerTick，在每次帧更新的时候加1，记下帧更新的次数。
        if(timerTick>=timerTotal)
        {
            fireworks.push(new Firework(clientw/2,clienth,random(0,clientw),random(0,clienth)));
            timerTick=0;
        }
        else{
            timerTick++;
        }
    }
    window.οnlοad=loop();
</script>

<!-- Vue 实例 -->
<script>
    new Vue({
        el: '#app',
        data: {
            displayContent: 'Welcome to Admin Dashboard',
            dashboardShow: true,
            payShow: false,
            subjectShow: false,
            accountingShow: false,
            accountancyShow: false,
            transactionShow: false
        },
        methods: {
            handleMenuSelect(index) {
                if (index === '1') {
                    this.dashboardShow = true;
                    this.payShow = false;
                    this.subjectShow = false;
                    this.accountingShow = false;
                    this.accountancyShow = false;
                    this.transactionShow = false;
                    this.displayContent = 'Welcome to Admin Dashboard';
                } else if (index === '2') {
                    this.dashboardShow = false;
                    this.payShow = true;
                    this.subjectShow = false;
                    this.accountingShow = false;
                    this.accountancyShow = false;
                    this.transactionShow = false;
                    this.displayContent = '支付设计白皮书';
                } else if (index === '3') {
                    this.dashboardShow = false;
                    this.payShow = false;
                    this.subjectShow = true;
                    this.accountingShow = false;
                    this.accountancyShow = false;
                    this.transactionShow = false;
                    this.displayContent = '科目账户结构展示';
                } else if (index === '4') {
                    this.dashboardShow = false;
                    this.payShow = false;
                    this.subjectShow = false;
                    this.accountingShow = true;
                    this.accountancyShow = false;
                    this.transactionShow = false;
                    this.displayContent = '账务报表';
                } else if (index === '5') {
                    this.dashboardShow = false;
                    this.payShow = false;
                    this.subjectShow = false;
                    this.accountingShow = false;
                    this.accountancyShow = true;
                    this.transactionShow = false;
                    this.displayContent = '会计报表';
                } else if (index === '6') {
                    this.dashboardShow = false;
                    this.payShow = false;
                    this.subjectShow = false;
                    this.accountingShow = false;
                    this.accountancyShow = false;
                    this.transactionShow = true;
                    this.displayContent = '交易列表';
                }
                // 在这里处理菜单项选择后的操作
            }
        }
    });
</script>
</body>
</html>
